import { Breadcrumb, Switch, Dropdown } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { useStore } from "@/store";
import styles from "./index.module.scss";
import storage from "@/utils/storage";
const NavHeader = () => {
    const { userInfo, collapsed, updateCollapsed } = useStore();
    const items: MenuProps["items"] = [
        {
            key: "1",
            label: userInfo.userEmail,
        },
        {
            key: "2",
            label: "退出",
        },
    ];
    const breadList = [
        {
            title: "首页",
        },
        {
            title: "工作台",
        },
    ];
    const onClick: MenuProps["onClick"] = ({ key }) => {
        if (key === "logout") {
            storage.remove("token");
            location.href = "/login?callback=" + encodeURIComponent(location.href);
        }
    };

    const toggleCollapsed = () => {
        updateCollapsed();
    };
    return (
        <div className={styles.navHeader}>
            <div className={styles.left}>
                <div onClick={toggleCollapsed}>{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</div>
                <Breadcrumb items={breadList} style={{ marginLeft: 10 }} />
            </div>
            <div className={styles.right}>
                <Switch checkedChildren="暗黑" unCheckedChildren="默认" style={{ marginRight: 10 }} />
                <Dropdown menu={{ items, onClick }} trigger={["click"]}>
                    <span className={styles.nickName}>{userInfo.userName}</span>
                </Dropdown>
            </div>
        </div>
    );
};

export default NavHeader;
